<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue';

onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer')
  var camera = viewer.camera;
  viewer.imageryLayers.addImageryProvider(
    new Cesium.WebMapTileServiceImageryProvider({
      url: 'https://t0.tianditu.gov.cn/mapservice/swdx?tk=ed1971143fd25b4b2f822256051268ba',
      layer: "img",
      style: "default",
      format: "tiles",
      tileMatrixSetID: 'GoogleMapsCompatible',
      minimumLevel: 0,
      maximumLevel: 18
    }))
  // gltf模型的URL
  // 定义模型的坐标和大小  
  const building = viewer.entities.add({
    name: 'building',
    position:Cesium.Cartesian3.fromDegrees(
      116.39,
      39.9,
      2
    ),
    model: {
      uri: '/three/chaoyi.glb',
      minimumPixelSize: 128,
      scale: 0.1
    },
  })
  // // 把模型加到场景里
  // viewer.scene.primitives.add(new Cesium.Model(modelOptions))
  var position = Cesium.Cartesian3.fromDegrees(116.39, 39.9, 700);
  console.log(position);
  viewer.camera.flyTo({
    destination: position,
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-30),
      roll: 0.0,
    },
    duration: 5,
    complete: function () {
      // 在相机移动完成后执行
      console.log("已抵达北京天安门");
    },
  })
})
</script>
<style scoped>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
</style>
